<template>
	<view class="task">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">更多玩法</block>
		</cu-custom>
		<view class="taskRecord">
			<view class="task-list" v-if="tasks">
				<view class="task-item" v-for="(items,i) in tasks" :key="items">
					<view class="taskInfo">
						<view class="task-content">{{items.name}}</view>
						<view class="task-state">{{items.explain}}</view>
					</view>
					<view class="taskPlan" v-if="items.checked>=items.num&&items.num!=0">
						<view class="total-num success-num">{{changeStatus(items.checked,items.num)}}</view>
						<view class="goTake success">已完成</view>
					</view>
					<view class="taskPlan" v-else>
						<view class="total-num">{{changeStatus(items.checked,items.num)}}</view>
						<view class="goTake" @click="takeTask(i)">去完成</view>
					</view>
				</view>
			</view>
		</view>
		<my-show-model @getValue="changeTips" @getValues="goShare" v-if="openTips" :showModel="showModel"></my-show-model>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import storeApi from '@/api/store';
	import MyShowModel from "@/components/MyShowModel";
	export default {
		data() {
			return {
				tasks:[],
				taskStatus:false,
				openTips:true,
				taksUrl:'',
				share: {
					path: '/pages/stroe/index/index',
					title: '邀您助力',
					imageUrl: '/static/share-sign.png'
				},
				showModel:{
					title:'提示',
					message:'邀请好友签到助力',
				}
			}
		},
		onLoad() {
			this.openTips = false;
			this.getTask();
		},
		onShow() {
			if(this.openTips){
				this.openTips = false;
			}
		},
		components:{MyShowModel},
		computed: {
			...mapState(['config','userInfo']),
		},
		filters:{},
		
		methods: {
			async getTask(){
				let res = await storeApi.getTasks({});
				if(res.code == 1){
					this.tasks = res.data
				}else{
					console.log(res.msg)
				}
			},
			changeStatus(num,total){
				if(total == 0){
					return '不限次数';
				}else if(num < total){
					return num + '/' + total;
				}else{
					return num + '/' + total;
				}
			},
			takeTask(e){
				if (e == 0){
					this.taksUrl = '../stroe/index/index';
					this.goTasks();
				}else if(e == 2){
					this.share.title = '您有一张专属优惠券';
					this.share.imageUrl = '/static/share_3.png';
					// this.share.path = '/pages/coupon/index?outPutUid=' + this.userInfo.id;
					this.share.path = '/pages/my/welcome?outPutUid=' + this.userInfo.id;
					this.openTips = true;
					// uni.switchTab({
					// 	url:'../my/index'
					// })
				}else if(e == 3){
					uni.switchTab({
						url:'../home/index'
					})
				}else if(e == 1){
					this.share.title = '签到助力';
					this.share.imageUrl = '/static/share-sign.png';
					this.share.path = '/pages/stroe/index/index?share_id=' + this.userInfo.id;
					this.openTips = true;
				}
			},
			goShare(){
				this.changeTips();
				console.log(this.share.path);
			},
			changeTips(){
				this.openTips = !this.openTips;
			},
			goTasks(){
				let _this = this;
				uni.navigateTo({
					url:_this.taksUrl
				})
			}
		},
		onShareAppMessage(res){
			return {
				path: this.share.path,
				title: this.share.title,
				imageUrl: this.share.imageUrl
			}
		},
	}
</script>

<style lang="less">
	.task {
		height: 100vh;
		background: rgb(238,238,238);
		font-family: 'Noto Sans SC';
		.taskRecord{
			margin-top: 15rpx;
			padding: 0 25rpx;
		}
		.task-item {
			border-radius: 10rpx;
			height: 120rpx;
			color: #939393;
			background-color: #ffffff;
			margin-bottom: 10rpx;
			padding: 0 20rpx;
			.task-content{
				color: #333333;
				font-size: 28rpx;
				padding-top: 20rpx;
			}
			.taskInfo{
				width: 500rpx;
				height: 120rpx;
				display: inline-block;
				view{
					width: 100%;
					float: left;
				}
			}
			.taskPlan{
				float: right;
				.total-num{
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					font-weight: 600;
					text-align: center;
					color: #ea5a32;
				}
				.success-num{
					color: #c1b9b7;
				}
				.goTake{
					height: 50rpx;
					line-height: 50rpx;
					margin: 10rpx;
					width: 120rpx;
					background-color: #ea5a32;
					color: #ffffff;
					text-align: center;
					border-radius: 15rpx;
				}
				.success{
					background-color: #c1b9b7;
				}
			}
			.task-state{
				font-size: 20rpx;
			}
			.countNum{
				font-family: 'SinHei';
				float: right;
				color: #ea5a32;
				font-size: 27rpx;
				font-weight: 700;
			}
		}
	}
</style>
